<template>
  <div>
    <el-card>
      <!-- 顶部工具栏 -->
      <el-row type="flex">
        <!-- 左边部分 -->
        <el-col>
          <el-button type="primary" @click="addFn">添加客户</el-button>
        </el-col>
        <!-- 右边部分 -->
        <el-col>
          <el-row type="flex" justify="space-between	">
            <!-- 全部经济  -->
            <el-select v-model="agentSelect">
              <el-option label="全部经纪人" value="" />
              <el-option
                v-for="item in agentList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <!-- 搜索框 -->
            <el-input
              v-model="nameInput"
              placeholder="请输入关键字"
              style="width: 100%"
            >
              <el-button slot="append" @click="submitSearch">筛选</el-button>
            </el-input>
          </el-row>
        </el-col>
      </el-row>
      <el-divider />
      <!-- 表格部分 -->
      <el-table :data="clientsData" border style="width: 100%">
        <el-table-column label="图片" prop="image" width="120">
          <template v-slot="{ row }">
            <img :src="row.image" class="tableImg" style="width: 100%">
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="name" />
        <el-table-column label="邮箱" prop="email" />
        <el-table-column label="电话" prop="phone" />
        <el-table-column label="经济" prop="agent.name" />
        <el-table-column label="微信" prop="wechat" />
        <el-table-column label="介绍" prop="desc" />

        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button
              size="mini"
              type="primary"
              @click="editFn(row.id)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="delFn(row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-divider />
      <!-- 分页器 -->
      <el-row type="flex" justify="center">
        <el-pagination
          layout="prev, pager, next"
          :page-size="pageConfig._limit"
          :total="total"
          @current-change="changeCur"
        />
      </el-row>
    </el-card>
    <!-- 弹窗子组件 -->
    <Addclients
      ref="editFnn"
      :show-dialog.sync="showDialog"
      @list="clientsList"
    />
  </div>
</template>

<script>
import { clientsList, delAgents, clientsCount } from '@/api/clients'
import Addclients from './componebts/add-clients'
import { getAgentsList } from '@/api/agents'

export default {
  components: { Addclients },
  data() {
    return {
      // 筛选相关
      nameInput: '',
      agentSelect: '',
      // 添加弹出
      showDialog: false,
      agentList: [],
      clientsData: [],
      // 分页参数
      pageConfig: {
        _limit: 2,
        _start: 0
      },
      total: 0, // 总页数
      page: 1, // 当前页
      image: ''
    }
  },
  created() {
    // 调用接口刷新列表
    this.clientsList()
    // 调用经济的列表
    this.getAgentsList()
    // 调用客户接口
    this.clientsCount()
  },
  methods: {
    submitSearch() {
      // 发请求拿数据
      // 发请求拿数据
      // 还得关注分页功能
      // 获取数据
      this.clientsList()
      // 获取数量
      this.clientsCount()
    },
    // 分页
    changeCur(currentPage) {
      // console.log(1, currentPage)//当前点击页面页数
      this.page = currentPage
      // 当前下标等于上一页最后下标的后一个, 把页码减一, 乘以每页条数即可
      this.pageConfig._start = (this.page - 1) * this.pageConfig._limit
      // 重新渲染
      this.clientsList()
    },
    // 获取客户列表
    async clientsList() {
      this.pageConfig._start = (this.page - 1) * this.pageConfig._limit
      this.clientsCount() // 111
      const { data } = await clientsList({
        ...this.pageConfig,
        // 获取数据还要带上用户的搜索条件
        name_contains: this.nameInput || null,
        agent: this.agentSelect || null
      })
      this.clientsData = data
      console.log('客户', data)
    },
    // 获取客户数量
    async clientsCount() {
      const { data } = await clientsCount({
        name_contains: this.nameInput || null,
        agent: this.agentSelect || null
      })
      this.total = data
    },
    // 搜索框经纪,调用经济接口
    async getAgentsList() {
      const { data } = await getAgentsList()
      this.agentList = data
      console.log('经纪', data)
    },
    // 添加客户
    addFn() {
      this.showDialog = true
    },
    // 编辑
    async editFn(id) {
      this.showDialog = true
      // console.log(999, this.$refs.editFnn)
      this.$refs.editFnn.editFnn(id)
    },
    // 删除
    delFn(id) {
      this.$confirm('是否确定删除该条数据', '删除', {
        type: 'warning'
      })
        .then(async() => {
          // 调用接口删除
          await delAgents(id)
          // 删除最后一条数据时优化
          if (this.clientsData.length === 1 && this.pageConfig._start !== 1) {
            this.page--
          }
          // console.log(1, this.pageConfig._start - 1)
          // 重新渲染
          this.clientsList()
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.tableImg {
  width: 178px;
  height: 120px;
  // 图片写死宽高的情况, 控制拉伸效果的样式
  object-fit: contain;
  object-fit: cover;
}
</style>
